<template>
  <div class="app-container">
    <!-- <p class="warn-content">
      富文本基于
      <el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
    </p> -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
        <div ref="editor" class="text" />
      </el-col>
      <el-col
        style="visibility:hidden"
        :xs="24"
        :sm="24"
        :md="9"
        :lg="9"
        :xl="9"
      >
        <div v-html="editorContent" />
        <!-- <div>{{content}}</div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { upload } from "@/utils/upload";
import E from "wangeditor";
export default {
  name: "Editor",
  data() {
    return {
      editor: "",
      editorContent: ""
    };
  },
  computed: {
    ...mapGetters(["imagesUploadApi", "baseApi"])
  },
  mounted() {
    const _this = this;
    this.editor = new E(this.$refs.editor);
    // 自定义菜单配置
    this.editor.config.zIndex = 5;
    // 文件上传
    this.editor.config.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      files.forEach(image => {
        upload(_this.imagesUploadApi, image).then(res => {
          const data = res.data;
          const url =
            _this.baseApi + "/file/" + data.type + "/" + data.realName;
          insert(url);
        });
      });
    };
    this.editor.config.onchange = html => {
      this.editorContent = html;
      this.$emit("onChange", this.editorContent);
    };
    this.editor.create();
    // 初始化数据
    this.editor.txt.html(this.editorContent);
  },
  methods: {
    getText() {
      return this.editor.txt.text();
    },
    setText(val) {
      this.editor.txt.html(val);
      if (val == null) {
        this.editor.txt.clear();
      }
    }
  }
};
</script>

<style scoped>
.text {
  text-align: left;
}
::v-deep .w-e-text-container {
  height: 700px !important;
}
.app-container {
  padding: 0px !important;
}
</style>
